import React,{useState,useEffect} from 'react';
import {Spin ,Col, Row,Card  } from 'antd'
import { useRequest } from 'umi';
import { userTData , userTableData} from './service';
import TreeArea from '@/pages/tableAndTree/components/treeArea/index'
import TableArea from '@/pages/tableAndTree/components/tableArea/index'
import type { DataNode } from 'antd/es/tree';
import styles from './index.less'

const TableAndTreePage : React.FC = () => {
  let userTreeData = useRequest(userTData);
  let userData = useRequest(userTableData);
  let treeData:DataNode[] = userTreeData.data?.userTreeData || []
  return (
    <div>
      <Row gutter={16}>
        <Col span={6}>
          <Card className={styles.treeCon}>
            <Spin spinning={userTreeData.loading}>
              {
                treeData.length>0 &&
                <TreeArea data={treeData}></TreeArea>
              }
            </Spin>
          </Card >
        </Col>
        <Col span={18}>
          <Card className={styles.treeCon}>
            <Spin spinning={userData.loading}>
              {
                userData.data?.userTableHead !== undefined && userData.data?.userTableHead.length>0&&
                userData.data?.userTableList !== undefined && userData.data?.userTableList.length>=0 &&
                <TableArea tableHead={userData.data?.userTableHead} tableData={userData.data?.userTableList}></TableArea>
              }
            </Spin>
          </Card >
        </Col>
      </Row>
    </div>
  );
};

// @ts-ignore
export default TableAndTreePage;
